/**
 * 积分商城-我的积分
 */
'use strict';
import React from 'react';
import Link from '../common/Link'
import {
    R_header
} from '../common/index'
// import {Tabs} from 'antd';
// const TabPane = Tabs.TabPane;
import {
    HttpService,
    Tips,
    pullDownRefresh
} from '../../Tools'
// import './mock/index'
import Icon from './img/sunflower.jpg'
import Arrow from './img/arrow.png'
import './style/business.scss'
import LoadingBox from '../common/LoadingBox'

export default class GoodsManage extends React.Component {
    constructor(props) {
        super(props);

        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 60;
        this.state = {
            showTab: true,
            dataList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,

        }
        this.changeStatus = this.changeStatus.bind(this)

    }

    // componentWillMount() {
    //     document.getElementById('content').style.height='auto'
    //     // this.getIntegral();
    // }

    componentWillUnmount() {
        window.onscroll = null
    }

    componentDidMount() {
        this.getData()
        //加载更多
        window.onscroll = () => {
            const {
                dataEnd,
                dataNull,
                page
            } = this.state;
            if (this.dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                this.page++;
                this.getData();
            }
        }
        const obj = document.getElementById('refreshbox')
        const contentObj = document.getElementById('pdownrefresh')
        const statusObj = document.getElementById('status')
        let rct = this;
        pullDownRefresh(obj, contentObj, statusObj, 70, function(data) {
            if (data.status == 'end' && data.top >= 50) {
                this.page = 1;
                this.getData(1);
            }
        }.bind(this))
    }

    changeStatus(index) {
        document.querySelector('.nav .selected').className = ''
        document.querySelectorAll('.nav li')[index].className = 'selected'

        this.setState({
            showTab: !this.state.showTab
        });
        let state=index==0?2:'1,3'
        HttpService.query({
            url: '/jf/business/goodsArchives/pageJfGoodsArchivesByCompany',
            async:false,
             data: {
                    token: localStorage.btoken,
                    page: this.page,
                    size: this.pagesize,
                    companyId: localStorage.companyId,
                    state:state
                },
            success: (res => {
                if(res.code=='10140'){
                    this.setState({
                        dataList: res.data.list
                    });
                }else{
                    Tips(res.data)
                }


            })
        })
    }

    //获取数据列表
    getData(status) {
        this.dataLoad = 1
        let state=this.state.showTab?2:1
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        if (status == 1)
            this.page = 1
        HttpService.query({
            url: '/jf/business/goodsArchives/pageJfGoodsArchivesByCompany',
            data: {
                token: localStorage.btoken,
                page: this.page,
                size: this.pagesize,
                companyId: localStorage.companyId,
                state:state
            },
            success: (res => {
                if(res.code=="10140"){
                    this.dataLoad = 0
                    this.setState({
                        dataLoad: 0
                    });

                    //获取数据成功
                    let dataList = res.data.list

                    if (status != 1)
                        dataList = this.state.dataList.concat(res.data.list);
                    this.setState({
                        dataList
                    });
                    if (res.data.totalPages == this.page) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (res.data.list.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (dataList.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    return;
                }else{
                    Tips(res.msg)
                }



            })
        })
    }


    render() {
        const {
            dataList,
            showTab,
            dataLoad,
            dataEnd,
            dataNull,
        } = this.state;
        let dataLists;
        // if(dataList.length>0){
            dataLists = dataList.map(function (item) {
                let icon=JSON.parse(item.smallImg).goodsHeaderImg;
                let saleNumber=item.totalNum - item.actualNum;
                return (
                    <Link to={ 'goodsDetail/' + item.id}>
                    <li className="list">
                        <div className="media media-item">
                            <div className="media-left media-middle">
                                <img className="media-object" src={icon} alt="..."/>
                            </div>
                            <div className="media-body content">
                                <h4 className="media-heading">{item.name}</h4>
                                <div className="extraInfo">
                                    <span>¥{item.consumeCredit}荣誉值</span>
                                    <span>库存：{item.totalNum}</span>
                                </div>
                                <div className="saleNumber">销量：<span>{saleNumber}</span> <span style={{color:'#ac2925',paddingLeft:'60px'}}>{item.auditStatus==3?'审核未通过':''}</span></div>
                            </div>
                            <div className="media-right media-middle">

                                    <img src={Arrow}/>

                            </div>
                        </div>
                    </li>
                    </Link>
                )
            }.bind(this))
        // }else{
        //     dataLists=''
        // }

        return (
            <div className="goodsManage">
                <R_header title="商品管理" left="1" right="spgl" back2="2"/>
                <div id='refreshbox' className="refreshbox">

                    <div id='pdownrefresh'>
                        <div className="showbtn">
                            <ul className="nav nav-pills">
                                <li role="presentation" className="statusLi selected"
                                    onClick={this.changeStatus.bind(this, 0)}><span > 已上架</span></li>
                                <li role="presentation" className="statusLi" onClick={this.changeStatus.bind(this, 1)}>
                                    <span>审核中</span></li>
                            </ul>
                        </div>
                        <div id='status'><span></span></div>
                        {showTab ? <ul className="ysj">
                            {dataLists}
                            <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd} dataNullMsg='暂无审核中商品' />
                        </ul> :
                            <ul className="shz">
                                {dataLists}
                                <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd} dataNullMsg='暂无已上架商品' />
                            </ul>}
                    </div>
                </div>
            </div>
        )
    }
}
